<template>
  <div style="overflow: hidden;">
    <!-- <div style="background-color: red;width: 100%;height: 100%;box-shadow: inset 0px 0px 20rem 0px #000A1D;"></div> -->
    <mapDiv ref="mapv"></mapDiv>
    <div style="position: absolute;top: 200vw" v-if="tcShow">
      <div style="width: 15rem;" ref="jksb" class="logBox">
        <div class="logBox_top">航标信息</div>
        <div class="logBox_con">
          <div v-for="(item, i) in csCodeList" :key="i" style="font-size: 0.8rem;margin-bottom: 0.5rem;"><span>{{ item.name }}</span><span>{{ tadataObj[item.code] }}{{
            item.unit }}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mapDiv from "@/components/map/map.vue";
import { mainlist, buoylist } from "@/api/hbyxgl.js";
export default {
  components: {
    mapDiv,
  },
  //变量
  data() {
    return {
      tcShow: false,
      csCodeList: [{
        name: "航标名称：",
        code: "name",
        unit: ""
      }, {
        name: "所属航道：",
        code: "name",
        unit: ""
      }, {
        name: "航标类型：",
        code: "name",
        unit: ""
      }, {
        name: "管养单位：",
        code: "name",
        unit: ""
      }, {
        name: "设标地点：",
        code: "name",
        unit: ""
      }, {
        name: "标体形体：",
        code: "name",
        unit: ""
      },
      {
        name: "航标坐标：",
        code: "name",
        unit: ""
      }],
      tadataObj: {}
    }
  },
  //初始
  mounted() {
    this.init()
    this.getbuoylist();
  },
  //事件
  methods: {
    init() {
      // let list = [{ name: "ssss", location: [120.16336519008796, 31.70712433307621] }];
      // this.$refs.mapv.addPoints(list, "qxz", 1, "hb", 10, true);
    },
    getbuoylist() {
      buoylist({ pageNum: 1, pageSize: 1000 }).then((res) => {
        // this.$refs.mapv.initData(res.rows);
        let list = []
        res.rows.forEach((item) => {
          list.push({
            ...item, location: [item.buoyLng, item.buoyLat], name: item.buoyName
          })

        })
        console.log(list, "data");

        this.$refs.mapv.addPoints(list, "hb", 2, "hb", 10, true);
      });
    },
    mapClick(data, e) {
      console.log(data, 'data');
      this.getHBlog(data, e);
    },
    getHBlog(tadata, e) {
      this.tadataObj = Object.assign({}, tadata.data);
      console.log(this.tadataObj,'tadataObj');
      
      this.tcShow = true;
      this.$nextTick(() => {
        setTimeout(() => {
          console.log(this.$refs.jksb, 'jksb');

          // this.$forceUpdate();
          let html2 = this.$refs.jksb;
          this.$refs.mapv.getPopup(
            html2.outerHTML,
            e,
            tadata.data.location,
            this.tadataObj
          );
        }, 200);
      });
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped>
.logBox {
  background: url("~@/assets/hb_img/bj/box.png") no-repeat;
  background-size: 100% 100%;
}

.logBox_top {
  width: 100%;
  /* height: 15%; */
  background: url("~@/assets/hb_img/bj/H1_008.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.5rem 1.5rem;
}

.logBox_con {
  width: 100%;
  height: calc(100% - 15%);
  padding: 0.5rem 1rem;

}
</style>